<!-- 关联个股 -->
<template>
  <div class="relevance">
    <!-- 同行业个股排名 -->
    <yn-com-comTitle name="同行业个股排名"></yn-com-comTitle>
    <yn-relevance-industry :data="industry"></yn-relevance-industry>
    <!-- 同概念个股排名 -->
    <yn-com-comTitle name="同概念个股排名" class="mt15"></yn-com-comTitle>
    <div class="mt15 module">
      <span
        :class="{on:idx==index}"
        v-for="(item,index) in moduleData"
        :key="index"
        @click="moduleClick(item,index)"
      >{{item.sectionName}}</span>
    </div>
    <yn-relevance-conception :data="conception" class="mt15"></yn-relevance-conception>
    <!-- 同地区个股排名 -->
    <yn-com-comTitle name="同地区个股排名" class="mt15"></yn-com-comTitle>
    <yn-relevance-region :data="region"></yn-relevance-region>
  </div>
</template>

<script>
import { relevance } from "../script/api";

export default {
  data() {
    return {
      industry: [],
      conception: [],
      region: [],
      moduleData: [],
      idx: 0
    };
  },
  components: {},
  computed: {},
  mounted() {
    this.relevance();
  },
  methods: {
    async relevance() {
      const res = await relevance();
      this.industry = res.industry;
      this.conception = res.conception;
      this.region = res.region;
      this.moduleData = res.module;
    },
    async getConception(item) {
      const res = await relevance({
        module: item.sectionCode
      });
      this.conception = res;
    },
    moduleClick(item, index) {
      this.idx = index;
      this.getConception(item);
    }
  }
};
</script>
<style lang='scss' scoped>
</style>